<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document2222222222222</title>
  </head>
  <body>
    <!-- <div id="box">
      <div>
        3
        <p>
          2
          <span>1</span>
        </p>
      </div>
    </div>
    <button id="btn" name="name" value="999">123</button>
    <div id="div2">
      <p>yidaklsjdklajsldk</p>
    </div>
    <div id="div3">
      我是div2的下一个兄弟
      <span>666</span>
    </div> -->
    <!-- 事件委托 -->
    <!-- 
    <ul>
      <li onclick="fun(this)">1</li>
      <li onclick="fun(this)">2</li>
      <li onclick="fun(this)">3</li>
      <li onclick="fun(this)">4</li>
      <li onclick="fun(this)">5</li>
      <li onclick="fun(this)">6</li>
      <li onclick="fun(this)">7</li>
    </ul> -->
    <ul id="ulid" onclick="fun()">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
    <button onclick="add()">button</button>
  </body>
  <script>
    function fun() {
      console.log(event.target.innerHTML)
      console.log(event.target.nodeName)
    }

    function putong() {
      console.log(this)
    }
    function add() {
      var liObj = document.createElement('li')
      liObj.innerHTML = '新增li'
      document.getElementById('ulid').appendChild(liObj)
    }

    window.onload = function () {
      // //   var html = `<button>123</button>` //html模板字符串
      // //   document.getElementById('box').innerHTML = html
      // //   var childNodes1 = document.getElementById('box').childNodes //获取子节点，包含换行 不包含子节点的子节点
      // //   console.log(childNodes1)
      // //   var btnObj = document.createElement('button') //创建一个html元素对象
      // var btn123 = document.getElementById('btn')
      // //   btnObj.innerHTML = '6666'
      // //   document.body.appendChild(btnObj) //追加一个子节点
      // //   console.log(btn123)
      // //   console.log(html)
      // //   console.log(btnObj)
      // //   document.body.replaceChild(btnObj, btn123) //替换一个子节点 参数1：新元素 参数2：旧元素
      // //   console.log(btn123.attributes) //属性列表
      // //   var cloneObj = btn123.cloneNode()
      // //   console.log(cloneObj) //克隆一个元素对象
      // var div2Obj = document.getElementById('div2')
      // //   document.getElementById('div2').childNodes
      // //   div2Obj.childNodes
      // //   console.log(
      // //     document.getElementById('div2').childNodes,
      // //     div2Obj.childNodes
      // //   )
      // console.log(div2Obj.firstChild) //获取第一个子节点
      // console.log(div2Obj.lastChild) //获取最后一个子节点
      // console.log(div2Obj.hasAttribute('name')) //检查元素对象是否有这个属性
      // console.log(div2Obj.nextSibling.nextSibling.innerHTML) //下一个兄弟节点
      // console.log(div2Obj.parentNode.childNodes[3]) //元素对象的父节点
      // console.log(div2Obj.previousSibling.previousSibling) //上一个兄弟节点
      // var div3Obj = document.getElementById('div3')
      // //   console.log(div3Obj.childNodes)
      // //   div3Obj.removeChild(document.getElementsByTagName('span')[1]) //删除一个子节点 参数：节点对象
      // //   console.log(btn123.childNodes[0].nodeValue) //获取子节点的值
      // //   btn123.childNodes[0].nodeValue = 77777777
      // var spanObj = document.createElement('span')
      // spanObj.innerHTML = 888
      // //向某个元素节点对象内添加一个子元素 参数1：新元素 ; 参数2：指定哪个节点的前面
      // div3Obj.insertBefore(spanObj, div3Obj.childNodes[1])
      // btn123.setAttribute('name', '777777') //修改属性值
      // console.log(document.domain)
      // console.log(document.referrer)
      // console.log(document.title)
      // console.log(document.URL)
    }
  </script>
</html>
